import { useState, useContext } from "react";
import "./index.css";
import { MAIN_X } from "@/common/constants";
import { MessageOutlined, AppstoreOutlined, RightOutlined, DownOutlined } from "@ant-design/icons";
import { message } from "antd";
import ChatManager from "../ChatManager/index.jsx";
import AiChatContext from "@/common/context/aiChatContext.js";

const ChatOptions = () => {
  const context = useContext(AiChatContext);

  const [open, setOpen] = useState(false);

  const handleNewChat = () => {
    context.clearChatX();
    message.success("新建会话成功");
  };

  const handleOpenHistory = () => {
    setOpen(!open);
  };

  const handleMouseEnter = () => {
    console.log(1111);
  };

  const handleMouseLeave = () => {
    setOpen(false);
  };

  return (
    <div className="chat-options" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
      <div className="options-item" onClick={() => context.setHasMsg(false)}>
        <img src={MAIN_X} alt="" width="30" />
        <span className="options-item-text">返回首页</span>
      </div>

      <div className="line"></div>

      <div className="options-item" onClick={handleNewChat}>
        <MessageOutlined style={{ fontSize: "28px", color: "#fff" }} />
        <span className="options-item-text">新建会话</span>
      </div>

      <div className="options-item session" onClick={handleOpenHistory}>
        <AppstoreOutlined style={{ fontSize: "28px", color: "#fff" }} />
        <span className="options-item-text">历史会话</span>
        <i className="history-arrow">
          {open ? (
            <DownOutlined style={{ fontSize: "14px", color: "#fff" }} />
          ) : (
            <RightOutlined style={{ fontSize: "14px", color: "#fff" }} />
          )}
        </i>
      </div>
      <div className="chat-manager-list">{open && <ChatManager />}</div>
    </div>
  );
};

export default ChatOptions;
